<template>
  <div class="cate-gory">
    <div class="head">
      <van-nav-bar :title="cate.name" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div class="category-conntent">
        <div class="imgs">
          <img :src="cate.imgs " alt />
        </div>
        <div class="desc">
          <p class="name">{{cate.name}}</p>
          <div class="price">
            ￥{{cate.price}}
            <span class="lastprice">{{cate.price*1.5}}</span>
          </div>
          <div class="salenum">已售{{cate.buynum}}件</div>
        </div>
        <div v-html="cate.detailinfo" class="details"></div>
      </div> 

    </div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.state.goodsNum"  to="./cart"/>
      
      <van-goods-action-button @click="onClickButton" type="warning" text="加入购物车" />
      <van-goods-action-button @click="onClickButton" type="danger" text="立即购买" />
    </van-goods-action>

    <van-action-sheet v-model="show" :title="cate.name">
      <div class="content">
        <img :src="cate.imgs" />

        <div class="price">￥{{(cate.price-0).toFixed(2)}}</div>

        <van-goods-action style="bottom:30px;">
  <van-goods-action-button type="warning" text="加入购物车" @click="insert(cate)" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { getDetail } from '@api'
import { mapState ,mapMutations} from 'vuex'
export default {
  data() {
    return {
      ...mapState(['goodsNum']),
      cate: {},//商品的详细信息
      show: false,//商品选择面板的显示/消失
    };
  },
  created() {
      //请求商品详细信息
       getDetail(this.$route.query.id).then(res=>{
       if( res.data.code===200){
       this.cate=res.data.data
       this.cate.imgs= this.cate.imgs.split("||")[0]
        this.cate.detailinfo=this.cate.detailinfo.replace(/<img/gi,'<img style="width:100%;"')
       }
      console.log(res);
     })
  
   
   
  },
  methods: {
    ...mapMutations(["insert"]),
    

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickButton() {
      this.show = true;
    },
    onClickIcon() {
      console.log(5);
    },
    
  },
};
</script>

<style lang="scss" scoped>

.head {
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
}
.category-conntent {
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.imgs {
  width: 100%;
}
img {
  width: 100%;
  display: block;
}
.desc {
  margin-top: 10px;
  background: white;
  padding: 20px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  .name {
    text-align: left;
    padding-bottom: 30px;
    width: 100%;
  }
  .price {
    color: #ff734c;
    font-size: 22px;
    text-align: left;
    display: inline-block;
    .lastprice {
      color: #999;
      font-size: 14px;
      text-decoration: line-through;
    }
  }
  .salenum {
    font-size: 12px;
    color: #999;
  }
  .details{
    width: 100%;
    img{
      width:100px;
    }
  }
}
.content {
  display: flex;
  padding: 16px 16px 160px;
  img {
    width: 100px;
  }
  .price {
    color: orange;
    font-size: 22px;
  }
}
</style>